<template>
  <div class="pages goodEditnew">
    <div class="pageLevel">
      <div class="operationBox tableSearch">
        <el-button type="primary" size="mini" @click="goBack">返回</el-button>
        <el-button
          type="primary"
          size="mini"
          v-if="setRole('修改')"
          @click="clickEdit"
          v-show="!isEdit"
        >修改</el-button>
        <el-button type="primary" size="mini" v-show="isEdit" @click="_handleSave">保存</el-button>
      </div>

      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="120px"
        class="goodsbatchs"
        size="small"
      >
        <div class="from_main infon">
          <el-row>
            <el-col :span="5">
              <el-form-item class="rowtwo">
                <el-checkbox
                  disabled
                  v-model="ruleForm.bulkBear"
                  label="是否散装称重"
                  :true-label="ruleForm.bulkBear"
                  :false-label="ruleForm.bulkBear"
                ></el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item class="rowtwo">
                <el-checkbox
                  :disabled="!isEdit"
                  v-model="ruleForm.retailState"
                  label="是否零售上架"
                  true-label="1"
                  false-label="0"
                ></el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item class="rowtwo" label="商品名称：" prop="name">
                <span>{{ruleForm.name}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item class="rowtwo" label="单位：" prop="goodsUnitName">
                <!-- <el-input disabled v-model="ruleForm.goodsUnitName"></el-input> -->
                <span>{{ruleForm.goodsUnitName}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item class="rowtwo" label="商品编号：" prop="code">
                <!-- <el-input disabled v-model="ruleForm.code"></el-input> -->
                <span>{{ruleForm.code}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item class="rowtwo" label="商品货号：" prop="goodsCode">
                <!-- <el-input disabled v-model="ruleForm.goodsCode"></el-input> -->
                <span>{{ruleForm.goodsCode}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item class="rowtwo" label="商品条码：" prop="barCode">
                <!-- <el-input disabled v-model="ruleForm.barCode"></el-input> -->
                <span>{{ruleForm.barCode}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item class="rowtwo" label="商品分类(品类)：" prop="classifyName">
                <!-- <el-input disabled v-model="ruleForm.classifyName"></el-input> -->
                <span>{{ruleForm.classifyName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item class="rowtwo" label="品牌：" prop="lableName">
                <!-- <el-input disabled v-model="ruleForm.brandName"></el-input> -->
                <span>{{ruleForm.lableName}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item class="rowtwo" label="商品销售单价：" prop="goodsSalePrice">
                <el-input v-show="isEdit" v-model="ruleForm.goodsSalePrice"></el-input>
                <span v-show="!isEdit">{{ruleForm.goodsSalePrice}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item class="rowtwo" label="商品会员单价：" prop="goodsMemberPrice">
                <el-input v-show="isEdit" v-model="ruleForm.goodsMemberPrice"></el-input>
                <span v-show="!isEdit">{{ruleForm.goodsMemberPrice}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item class="rowtwo" label="是否积分：" prop="goodsSalePrice">
                <el-radio-group
                  :disabled="disableMemberPrices"
                  v-model="ruleForm.seasonalMarkingSwitch"
                  @change="MarkingSwitch"
                >
                  <el-radio label="1">是</el-radio>
                  <el-radio label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item class="rowtwo" label="积分值：" prop="soldIntegral">
                <el-input
                  v-show="isEdit"
                  onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                  onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                  :disabled="disableMemberPrice"
                  v-model="ruleForm.soldIntegral"
                ></el-input>
                <span v-show="!isEdit">{{ruleForm.soldIntegral}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item class="rowtwo" label="会员价1:" prop="goodsMemberPrice1">
                <el-input v-show="isEdit"  maxlength="8" v-model="ruleForm.goodsMemberPrice1" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"></el-input>
                <!-- <sd-input style="width:220px;" v-show="isEdit" :val.sync='ruleForm.goodsMemberPrice1'></sd-input> -->
                <span v-show="!isEdit">{{ruleForm.goodsMemberPrice1}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item class="rowtwo" label="会员价2:" prop="goodsMemberPrice2">
                <el-input v-show="isEdit" maxlength="8" v-model="ruleForm.goodsMemberPrice2" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"></el-input>
                <span v-show="!isEdit">{{ruleForm.goodsMemberPrice2}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item class="rowtwo" label="会员价3:" prop="goodsMemberPrice3">
                <el-input v-show="isEdit" maxlength="8" v-model="ruleForm.goodsMemberPrice3" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"></el-input>
                <span v-show="!isEdit">{{ruleForm.goodsMemberPrice3}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item class="rowtwo" label="会员价4:" prop="goodsMemberPrice4">
                <el-input v-show="isEdit" maxlength="8" v-model="ruleForm.goodsMemberPrice4" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"></el-input>
                <span v-show="!isEdit">{{ruleForm.goodsMemberPrice4}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item class="rowtwo" label="会员价5:" prop="goodsMemberPrice5">
                <el-input v-show="isEdit" maxlength="8" v-model="ruleForm.goodsMemberPrice5" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"></el-input>
                <span v-show="!isEdit">{{ruleForm.goodsMemberPrice5}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>

      <el-table :data="ruleForm.goodsParameterList" style="width: 50%">
        <el-table-column prop="paramName" label="商品规格型号名称" align="center"></el-table-column>
        <el-table-column prop="paramValue" label="商品规格型号值" align="center"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import util from "@/util";
import { getgoodsPosDetail, updateGoodsPos } from "@/api";
import SdInput from "@/components/SdInput";
export default {
  computed: mapState(["sub", "power", "merchantId"]),
  components: { SdInput },
  data() {
    return {
      goodId: "",
      isEdit: false,
      ruleForm: {
        goodsUnitId: "", // 最小计量单位ID
        goodsUnitName: "", // 最小计量单位名称
        code: "", // 商户商品编号
        incomeTaxRates: "", // 进项税率
        isBatch: "", // 是否启用批次管理：0-否，1-是
        isAllot: "", // 是否分配：0-否，1-是
        goodsMemberPrice: "", // 商品会员单价
        shopId: "", // 商户id
        bulkBear: "", // 是否散装称重：0-否，1-是
        goodsShopId: "", // 商户商品id
        goodsPackParameterPd: "", // 包装规格ID
        classifyName: "", // 分类名称
        lableName: "", // 商品业务标签名称
        posPriceTemplateId: "", // pos销售价格模版id
        retailState: "", // 零售状态：0-不可零售，1-可零售
        barCode: "", // 条形码
        goodsSalePrice: "", // 商品销售单价
        name: "", // 商户商品名称
        primaryClassifyId: "", // 分类ID
        manufacturerPrice: "", // 厂家指导价
        goodsCode: "", // 商品货号
        status: "", // 状态：0-上架，1-下架
        shopName: "", // 商户名称
        seasonalMarkingSwitch: "0", //是否积分
        soldIntegral: "",
        goodsMemberPrice1: "",
        goodsMemberPrice2: "",
        goodsMemberPrice3: "",
        goodsMemberPrice4: "",
        goodsMemberPrice5: ""
      },
      seasonalMarkingSwitch: "0",
      disableMemberPrice: false,
      disableMemberPrices: true
    };
  },
  created() {
    this.goodId = util.getQuery().id;
  },
  mounted() {
    this.getGoodDetail(); //商品详情
  },
  methods: {
    // 配置权限
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    // 查看详情
    getGoodDetail() {
      let data = {
        id: this.goodId
      };
      getgoodsPosDetail(data).then(res => {
        res.data.retailState = res.data.retailState.toString();
        this.ruleForm = res.data;
        if (this.ruleForm.soldIntegral == "0") {
          this.$set(this.ruleForm, "seasonalMarkingSwitch", "0");
        } else {
          this.$set(this.ruleForm, "seasonalMarkingSwitch", "1");
        }
      });
    },
    // 返回按钮
    goBack() {
      history.back();
    },
    clickEdit() {
      this.isEdit = true;
      this.disableMemberPrices = false;
      if (this.ruleForm.seasonalMarkingSwitch == "0") {
        this.disableMemberPrice = true;
      } else {
        this.disableMemberPrice = false;
      }
    },
    MarkingSwitch(val) {
      if (val == "0") {
        this.disableMemberPrice = true;
      } else {
        this.disableMemberPrice = false;
      }
    },
    _handleSave() {
      if (this.ruleForm.seasonalMarkingSwitch == "0") {
        this.ruleForm.soldIntegral = "0";
      } else {
        this.ruleForm.soldIntegral = this.ruleForm.soldIntegral;
      }
      let data = {
        id: this.goodId,
        goodsSalePrice: this.ruleForm.goodsSalePrice,
        goodsMemberPrice: this.ruleForm.goodsMemberPrice,
        retailState: this.ruleForm.retailState,
        goodsMemberPrice1: this.ruleForm.goodsMemberPrice1,
        goodsMemberPrice2: this.ruleForm.goodsMemberPrice2,
        goodsMemberPrice3: this.ruleForm.goodsMemberPrice3,
        goodsMemberPrice4: this.ruleForm.goodsMemberPrice4,
        goodsMemberPrice5: this.ruleForm.goodsMemberPrice5,
        soldIntegral: this.ruleForm.soldIntegral
      };
      if (
        this.ruleForm.seasonalMarkingSwitch == "1" &&
        (this.ruleForm.soldIntegral == "" ||
          this.ruleForm.soldIntegral == undefined)
      ) {
        this.$message({
          type: "error",
          message: "选择是否积分为是时，请填写积分值"
        });
      } else {
        if (this.ruleForm.goodsShopId && this.ruleForm.goodsShopId != '' && this.ruleForm.goodsShopId != null) {
        data.goodsShopId = this.ruleForm.goodsShopId
       }
       if(Number(this.ruleForm.goodsMemberPrice)>Number(this.ruleForm.goodsSalePrice)||
       Number(this.ruleForm.goodsMemberPrice1)>Number(this.ruleForm.goodsSalePrice)||
       Number(this.ruleForm.goodsMemberPrice2)>Number(this.ruleForm.goodsSalePrice)||
       Number(this.ruleForm.goodsMemberPrice3)>Number(this.ruleForm.goodsSalePrice)||
       Number(this.ruleForm.goodsMemberPrice4)>Number(this.ruleForm.goodsSalePrice)||
       Number(this.ruleForm.goodsMemberPrice5)>Number(this.ruleForm.goodsSalePrice)){
           this.$message({
          type: "error",
          message: "会员价不能大于商品销售单价"
        });
       }else{
        updateGoodsPos(data).then(res => {
          this.$message({
            type: "success",
            message: res.msg
          });
          history.go(0);
        });
        }
      }
    }
  }
};
</script>
<style scoped>
.goodEditnew .from_main .el-input {
  width: 220px;
}
</style>




